import React, { Component } from 'react';
import { Link } from 'react-router-dom';
import { connect } from 'react-redux';
import '../style.scss';
import Folder from '../folder1.png';
import { Layout, Tree,Button, Tabs,Modal,} from 'antd';
import UnPunblished from './unPublished'
import Published from './published'
import { getTreeData} from '../../../api/resourceCategory/resourceCategory'
import { valueToShareType, valueToShareMode, valueToResourceForm, valueToPublishStatus} from '../commonConfig'
const { Content,Sider,Header } = Layout;
const { TabPane} = Tabs
const titleStyle={
  color:'rgb(0,126,220)',height:54.6,width:720,backgroundColor:'#f0f3f6',position:'absolute',left:0,top:0,display:'flex',
  alignItems:'center',paddingLeft:24,fontWeight:'bold',borderBottom:'2px solid #e5e6e8',zIndex:2
} 
const footerStyle={
  backgroundColor:'#e6eef5',width:720,height:53,position:'absolute',left:0,bottom:0,
  display:'flex',alignItems:'center',justifyContent:'center'
}
class ResourceAudit extends Component{
  constructor() {
    super()
    this.columns1=[
      {
        title:'序号', key:'index',dataIndex:'index',
        render: (text, record, index)=><span>{index+1}</span>
      },
      {
        title:'资源代码',key:'resource_id',dataIndex:'resource_id',
      },
      {
        title:'资源名称',key:'resource_name',dataIndex:'resource_name',
        render:(text,record)=>{
          return <a onClick={()=>this.view(record)} style={{color:'black'}}>{text}</a>
          }
      },
      {
        title:'资源提供方',key:'resource_provider',dataIndex:'resource_provider',
      },
      {
        title:'共享类型',key:'share_type',dataIndex:'share_type', 
        render:(text,record)=>{return <span >{valueToShareType[text]}</span>}
      },
      {
        title:'共享方式',key:'share_mode',dataIndex:'share_mode',
        render:(text,record)=>{return <span >{valueToShareMode[text]}</span>}
      },
      {
        title:'资源格式',key:'resource_form',dataIndex:'resource_form',
        render:(text,record)=>{return <span >{valueToResourceForm[text]}</span>}
      },
      {
        title:'发布状态',key:'publish_status',dataIndex:'publish_status',
        render:(text,record)=>{return <span >{valueToPublishStatus[text]}</span>}
      },
    ]
    this.state={
      total:20,
      page:1,
      totalPage:2,
      name:'',
      number:'',
      initialData: {},
      treeData: [],
      addVisible:false,
      editorVisible:false,
    }
  }

  changeName=(e)=>{
    this.setState({
      name:e.target.value
    });
  }

  changeNumber=(e)=>{
    this.setState({
      number:e.target.value
    })
  }
  componentWillMount() {
    getTreeData().then(res => {
      console.log(res.data)
      let c = this.formatTreeData(res.data.data,1)
      this.setState({treeData:c})
    })
  }

  formatTreeData = (data, layer) => {
    data.map((item, index) => {
      if(item.children&& (JSON.stringify(item.children) !== '[]') && item.children.length > 0) {
        item.layer = layer
        item.icon = <img src={Folder} alt='未知' />
        this.formatTreeData(item.children, layer+1)
      }
      else {
        item.layer = layer
      }
    })
    return data
  }

  onSelect = (selectedKeys, info) => {
    console.log('selected', selectedKeys, info);
    let layer = info.node.layer
    let obj = {
      name: '',
      departMent: info.node.title,
      curNumber: '',
      superNumber: info.node.key,
      description: '',
      layer: layer
    }
    this.setState({initialData: obj})
  }

  render(){
    const {total,page,totalPage,name,number, treeData, }=this.state;
    return (
      <Content style={{position:"relative",left:-24}} className='out-content' >
        <Layout className='layout'>
          <Sider className='sider'>
            <Tree
              defaultExpandAll={true}
              showLine={true}
              showIcon={true}
              treeData={treeData}
              onSelect={this.onSelect}
            />
          </Sider>
          <Layout className='rightLayout'>
            <Header className='right-header'>
              <p className='title'>目录发布</p>
            </Header>
            <Content className='content'>
            <Tabs type="card">
            <TabPane tab="   未发布   " key="1">
              <UnPunblished  baseColumns = {this.columns1} />
            </TabPane>
            <TabPane tab="   已发布   " key="2">
              <Published baseColumns = {this.columns1} />
            </TabPane>
          </Tabs>
            </Content>
          </Layout>
        </Layout>
      </Content>
    );
  }
}

const mapStateToProps = (state) => {
  return {
  }
}

const mapDispatchToProps = (dispatch) => ({
})

export default connect(mapStateToProps, mapDispatchToProps)(ResourceAudit);